<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册</title>
    <link rel="stylesheet" href="./static/css/common.css" />
    <script src="./static/js/vue.global.js"></script>
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <script src="./static/element-plus/index.full.js"></script>
  </head>

  <body>
    <div id="app">
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="4" style="height: 60px">
              <img src="./static/images/logo.png" />
              <h1 style="padding: 0 20px">技术社区</h1>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-menu mode="horizontal" :ellipsis="false">
                <el-menu-item index="0">首页</el-menu-item>
                <el-menu-item index="1">文章</el-menu-item>
                <el-menu-item index="2">课程</el-menu-item>
                <el-menu-item index="3">商城</el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-input placeholder="请输入关键字" />
            </el-col>
            <el-col :span="4">
              <el-link type="primary">登录</el-link>
              <el-link type="primary">注册</el-link>
            </el-col>
          </el-row>
        </el-header>
        <el-main class="main">
          <div style="width: 480px; margin: 0 auto">
            <h2>注册</h2>
            <el-form :model="form" label-width="auto" style="max-width: 600px">
              <el-form-item label="用户名">
                <el-input v-model="form.username" />
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="form.password" type="password" />
              </el-form-item>
              <el-form-item label="确认密码">
                <el-input v-model="form.confirmPassword" type="password" />
              </el-form-item>
              <el-form-item label="年龄">
                <el-input v-model="form.age" />
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="form.gender">
                  <el-radio value="男">男</el-radio>
                  <el-radio value="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="兴趣爱好">
                <el-checkbox-group v-model="form.hobby">
                  <el-checkbox value="阅读" name="type"> 阅读 </el-checkbox>
                  <el-checkbox value="运动" name="type"> 运动 </el-checkbox>
                  <el-checkbox value="旅行" name="type"> 旅行 </el-checkbox>
                  <el-checkbox value="数码" name="type"> 数码 </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="职业">
                <el-select v-model="form.job" placeholder="请选择职业">
                  <el-option label="前端开发工程师" value="前端开发工程师" />
                  <el-option label="后端开发工程师" value="后端开发工程师" />
                  <el-option label="产品设计师" value="产品设计师" />
                  <el-option label="运维工程师" value="运维工程师" />
                </el-select>
              </el-form-item>
              <el-form-item label="自我介绍">
                <el-input v-model="form.bio" type="textarea" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-main>
        <el-footer>
          <el-row>
            <el-col :sm="24" :lg="8">
              <div>
                <img src="./static/images/logo.png" alt="logo" />
              </div>
              <div>
                <h1>技术社区</h1>
                <p>致力于构建一个专业的IT技术交流社区</p>
              </div>
            </el-col>
            <el-col :sm="24" :lg="8">
              <div>
                <el-button type="text">首页</el-button>
                <el-button type="text">文章</el-button>
                <el-button type="text">课程</el-button>
                <el-button type="text">商城</el-button>
              </div>
              <div>
                <el-button type="text">关于我们</el-button>
                <el-button type="text">使用手册</el-button>
                <el-button type="text">隐私条款</el-button>
                <el-button type="text">建议反馈</el-button>
              </div>
            </el-col>
            <el-col :sm="24" :lg="8">
              <div>
                <h2>联系我们</h2>
                <p>电话：123456789</p>
                <p>邮箱：software@develop.com</p>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <p style="margin: 20px 0">软件开发工作室版权所有</p>
          </el-row>
        </el-footer>
      </el-container>

      <el-dialog v-model="dialogVisible" title="请确认注册信息" width="500">
        <p>用户名：{{form.username}}</p>
        <p>年龄：{{form.age}}</p>
        <p>性别：{{form.gender}}</p>
        <p>兴趣爱好：{{form.hobby}}</p>
        <p>职业：{{form.job}}</p>
        <p>自我介绍：{{form.bio}}</p>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="onConfirm"> 确定 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <script>
      const { ElMessage } = ElementPlus;
      const App = {
        data() {
          return {
            form: {
              username: "",
              password: "",
              confirmPassword: "",
              age: 0,
              gender: "男",
              hobby: [],
              jog: "前端开发工程师",
              bio: "",
            },
            dialogVisible: false,
          };
        },
        methods: {
          onSubmit() {
            this.dialogVisible = true;
          },
          onConfirm() {
            this.dialogVisible = false;
            ElMessage({
              message: "注册成功",
              type: "success",
            });
          },
        },
        watch: {
          form: {
            handler(newUser, oldUser) {
              if (newUser.username && newUser.username.length < 4) {
                ElMessage.error("用户名长度必须大于等于4个字符");
                return;
              }
              if (newUser.password && newUser.password.length < 6) {
                ElMessage.error("密码长度必须大于等于6个字符");
                return;
              }
              if (newUser.password !== newUser.confirmPassword) {
                ElMessage.error("两次输入的密码不一致");
                return;
              }
            },
            deep: true,
            immediat: false,
          },
        },
      };
      Vue.createApp(App).use(ElementPlus).mount("#app");
    </script>
  </body>
</html>